import React from 'react'
import { View,Text,Image,StyleSheet, ScrollView,TextInput,TouchableOpacity,} from 'react-native'
import './common/global';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I from 'react-native-vector-icons/AntDesign';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Fabiao from './Fabiao'

const SettingsStack = createStackNavigator();
function StackNavigator(){
    return(
        <SettingsStack.Navigator>
            <SettingsStack.Screen name='piyixia' Component={App2} />
            <SettingsStack.Screen name='fabiao' Component={Fabiao} />
        </SettingsStack.Navigator>
    )
}
export default class App2 extends React.Component {

    constructor(props){
        super(props)
    
        this.state={
            show:false,
            val:''
        }
    }
    
    txtChange(text){
        this.setState({
            val:text
        })
    };
    showTxt(){
        if(this.state.val==""){
            this.setState({
                show:false
            })
        }else{
            this.setState({
                show:true
            })
        }
    }


    render(){
        return (
            <View style={styles.container1}>
            <ScrollView id="container" style={styles.container}>
                <View style={styles.part1}>
                    <Image style={styles.avatar} resizeMode="stretch" source={require('./img/con4.jpg')} />
                    <Text id="name" style={styles.name}>师大张艺兴</Text>
                </View>
                <View style={styles.part2}>
                    <Text id="article" style={styles.article}>我害怕鬼，但鬼未伤我分毫。我不害怕人，但人把我伤的遍体鳞伤。</Text>
                </View>
                <View style={styles.part3}>
                    <Image id="conImg" style={styles.conImg} source={require('./img/con2.jpg')} />
                    <Image id="conImg" style={styles.conImg} source={require('./img/con2.jpg')} />
                    <Image id="conImg" style={styles.conImg} source={require('./img/con1.jpg')} />
                    <Image id="conImg" style={styles.conImg} source={require('./img/avatar.jpg')} />
                </View>

                <View style={styles.part4}>
                    <View style={styles.part41}>
                        <View style={styles.bestCom}>
                            <Icon name="baby-face-outline" style={styles.face} size={30}/>
                            <Text style={{fontSize:17,color:'#fff',marginLeft:2}}>神评</Text>
                        </View>
                        <Icon name="arrow-up-bold-outline" style={styles.arrowup} size={36} />
                        <Text style={{fontSize:18,marginLeft:6,color:'#3C94CD'}}>4.7W</Text>
                        <Icon name="arrow-down-bold-outline" style={styles.arrowdown} size={36} />
                    </View>
                    <View style={styles.part42}>
                        <Text id="article" style={styles.article1}>我害怕鬼，但鬼未伤我分毫。我不害怕人，但人把我伤的遍体鳞伤。</Text>
                    </View>
                    <View style={styles.part43}>
                        <Image id="conImg" style={styles.conImg} source={require('./img/con4.jpg')} />
                        <Image id="conImg" style={styles.conImg} source={require('./img/con2.jpg')} />
                        <Image id="conImg" style={styles.conImg} source={require('./img/con1.jpg')} />
                        <Image id="conImg" style={styles.conImg} source={require('./img/avatar.jpg')} />
                    </View>
                    <View style={styles.comments}>
                        <Text>{this.state.show==true?this.state.val:''}
                        </Text>
                    </View>
                    <View style={styles.txtBox}>
                        <TextInput style={styles.txtInput}
                            placeholder="走心评论，说点好听的~"
                            placeholderTextColor="#5A5B5F"
                            underlineColorAndroid="transparent"
                            onChangeText={this.txtChange.bind(this)}
                       />
                       <TouchableOpacity style={styles.txtBtn} activeOpacity={0.7} 
                            onPress={this.showTxt.bind(this)}
                       >
                           <Text style={styles.btnTxt}>发送</Text>
                       </TouchableOpacity>
                    </View>
                </View>

                
            </ScrollView>
             <View style={styles.contentFindView}>
             <TouchableOpacity
             style={{height:50,width:50,position:'absolute' }}
             onPress={()=>{
                 this.props.navigation.navigate('fabiao')}}>
                 <I name='pluscircle' style={{fontSize:50,color:'rgb(60,148,205)'}}/>
             </TouchableOpacity>
         </View>
        </View>
        )
    }
}

const styles = StyleSheet.create({
    container1:{
        flex:1
    },
    contentFindView: {
        height:50,
        width:50,
        position:'absolute',
        left:400,
        top:700    
    },
    bestCom:{
        width:80,
        backgroundColor:'#FF7A87',
        flexDirection:'row',
        alignItems:'center',
        borderRadius:20,
        paddingLeft:3
    },
    face:{
        color:'#FDE702'
    },
    container: {
      flex:1,
        margin: 0,
        padding: 0,
        backgroundColor:'#fff',
    },
    part1: {
        paddingLeft:20,
        paddingTop:16,
        paddingBottom:8,
        flexDirection:'row', 
        alignItems:'center',
        backgroundColor:'#eee',
        borderRadius:30
    },
    part2: {
        paddingTop:8,
        paddingLeft:20,
        paddingBottom:8,
        flexDirection:'row', 
        alignItems:'center',
        backgroundColor:'#fff'
    },
    part3:{
      width:'90%',
        paddingLeft:20,
        paddingTop:8,
        paddingBottom:8,
        flexDirection:'row',
        flexWrap: 'wrap',
        justifyContent:'center',
        backgroundColor:'#fff'
    },
    part4:{
        width:'90%',
        height:450,
        backgroundColor:'#F5F5F7',
        marginTop:20,
        marginBottom:20,
        padding:10,
        borderTopRightRadius:20,
        borderTopLeftRadius:20,
        marginLeft:'5%'
    },
    part41:{
        // backgroundColor:'blue',
        flexDirection:'row', 
        alignItems:'center',
    },
    part42:{
        // backgroundColor:'blue',
        flexDirection:'row', 
        alignItems:'center',
    },
    part43:{
        width:'100%',
        flexDirection:'row',
        flexWrap: 'wrap',
        paddingTop:20,
        justifyContent:'center'
    },
    arrowup:{
        color:'#3C94CD',
        marginLeft:160
    },
    arrowdown:{
        color:'#3C94CD',
        marginLeft:6
    },
    avatar: {
        // backgroundColor:'blue', 
        width: 40, 
        height: 40,
        borderRadius:ptd(100)
    },
    name: {
        marginLeft:ptd(12),
        fontSize:19, 
        color:'#5A5B5F'
    },
    article: {
        fontSize:20,
        width:'95%'
    },
    article1:{
      fontSize:14,
      width:'100%'
    },
    conImg:{
        //backgroundColor:'yellow',
        width: 130, 
        height: 130,
        borderRadius:8,
        marginRight:6,
        marginBottom:6,
        borderColor:'#ddd',
        borderWidth:1
    },
    txtBox:{
        width:'100%',
        height:40,
        marginBottom:5,
        backgroundColor:'#F5F5F7',
        flexDirection:'row'
    },
    txtInput:{
        width:'85%',
        backgroundColor:'#fff',
        borderRadius:20,
        marginLeft:5,
    },
    txtBtn:{
        width:45,
        height:30,
        backgroundColor:'skyblue',
        marginTop:5,
        marginLeft:5,
        borderRadius:10,
    },
    btnTxt:{
        textAlign:"center",
        lineHeight:30,
        color:'#fff',
        fontSize:18
    },
    comments:{
        width:'90%',
        marginBottom:5,
        marginTop:5,
    },
})
